<template>
  <div>
    <el-container>
      <el-aside width="210px" style="overflow:hidden" class="leftbar_bg">
        <el-menu :defaultActive="activeIndex" router>
          <template v-for="(item , idx) in sideMenu">
            <el-submenu :index="item.loadpage" v-if="item.children.length>0" :key="idx">
              <template slot="title">{{item.name}}</template>
              <el-menu-item
                v-for="(itemChild , idx) in item.children"
                :index="itemChild.loadpage"
                :key="idx"
              >{{itemChild.name}}</el-menu-item>
            </el-submenu>
            <el-menu-item :index="item.loadpage" v-else :key="idx" style="text-align:left">
              <i class="iconfont icon-icon-test1" v-if="item.name=='用户管理'"></i>
              <i class="iconfont icon-icon-test3" v-if="item.name=='机构管理'"></i>
              <i class="iconfont icon-icon-test" v-if="item.name=='角色管理'"></i>
              <i class="iconfont icon-icon-test2" v-if="item.name=='代码管理'"></i>
              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container class="main_bg">
        <el-main>
          <nuxt-child class="main_content"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sideMenu: [],
      ts: this.newStore(),
      data: null,
    };
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
  created() {
    this.getSidemenu();
  },
  methods: {
    getSidemenu() {
      const req = {
        handle:
          '67A5B6FEF17D97DECF116BDF95B95C0B843B7A441565EC6C4A6860EBB8D9E769',
        supid: '101',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.data = ts.d.data.operation1[0].hash.privstr;
        this.sideMenu = JSON.parse(this.data);
        this.$router.push(this.sideMenu[0].loadpage);
      });
    },
  },
};
</script>


<style lang="stylus" scoped>
.el-menu-item:focus, .el-menu-item:hover{
  background: #fff;
  color: #000;
}

.el-menu-item {
  background: rgb(50, 50, 59);
  text-align: center;
  color: #fff;
}
.el-menu {
  border: 0;
}
.el-menu-item:nth-child(1):focus, .el-menu-item:nth-child(1):hover {
  background: #fff;
  color: #000;
}
.el-menu-item:focus i, .el-menu-item:hover i{
  color: #000!important;
}
.el-menu-item i {
  font-size: 20px;
  float: left;
}

.el-menu-item.is-active {
  background: #fff;
  color: #000;
}
</style>
